// 点击修改
console.log(11)
document.querySelector('.box-address .btn .cancel').addEventListener('click',function(){
    document.querySelector('.box-address').style.display='none'
})
document.querySelector('.box-address span').addEventListener('click', function () {
    document.querySelector('.box-address').style.display = 'none'
})
const mya = document.querySelector('.box-address .a')
const myb = document.querySelector('.box-address .b')
const myc = document.querySelector('.box-address .c')
const myd = document.querySelector('.box-address .d')
const mye = document.querySelector('.box-address .e')
const myf = document.querySelector('.box-address .f')
document.querySelector('.text-right a').addEventListener('click', function () {
    document.querySelector('.box-address').style.display = 'block'
    document.querySelector('.box-address .a').value = document.querySelector('.consignee').innerHTML
    document.querySelector('.box-address .b').value = document.querySelector('.contact').innerHTML
    document.querySelector('.box-address .c').value = document.querySelector('.address').innerHTML

})
document.querySelector('.box-address .btn .determine').addEventListener('click', function () {
    if (mya.value.trim() === '' || myb.value.trim() === '' || myc.value.trim() === '' || myd.value.trim() === '' || mye.value.trim() === '' || myf.value.trim() === '') {
        alert('内容不能为空')
    } else {

        document.querySelector('.text-left .consignee').innerHTML = document.querySelector('.box-address .a').value
        document.querySelector('.text-left .contact').innerHTML = document.querySelector('.box-address .b').value
        document.querySelector('.text-left .address').innerHTML = document.querySelector('.box-address .c').value
        document.querySelector('.box-address').style.display = 'none'
        const myC = document.querySelector('.box-address .C')
        const myD = document.querySelector('.box-address .D')
        const myE = document.querySelector('.box-address .E')
        const myF = document.querySelector('.box-address .F')
        myC.value = ''
        myD.value = ''
        myE.value = ''
        myF.value = ''
    }
})

// 点击切换

document.querySelector('.box-handover .btn .cancel').addEventListener('click',function(){
    document.querySelector('.box-handover').style.display='none'
})
document.querySelector('.box-handover span').addEventListener('click', function () {
    document.querySelector('.box-handover').style.display = 'none'
})

document.querySelector('.action .qiehuan').addEventListener('click',function(){
    document.querySelector('.box-handover').style.display='block'
    document.querySelector('.box-handover .nr').addEventListener('click',function(e){
        if(e.target.tagName==='DIV'){
            const myactive= document.querySelector('.box-handover .active1');
            if(myactive){
                myactive.classList.remove('active1');
            }
            e.target.classList.add('active1');
        }
    });
})

document.querySelector('.box-handover .btn .determine').addEventListener('click',function(){
    const mynr=document.querySelector('.box-handover .nr');
    const selected = mynr.querySelector('.active1');
    if(selected){
        const id = selected.dataset.id;
        document.querySelector('.consignee').innerHTML= arr[id].name;
        document.querySelector('.contact').innerHTML= arr[id].phone;
        document.querySelector('.address').innerHTML= arr[id].address;
        document.querySelector('.box-handover').style.display='none';
    } else {
        alert('请选择地址');
    }
});
          
// 点击添加按钮

 const myAdd= document.querySelector('.Add')
document.querySelector('.action .tianjia').addEventListener('click',function(){
    document.querySelector('.Add').style.display='block'
})
document.querySelector('.Add .btn .cancel').addEventListener('click', function () {
    document.querySelector('.Add').style.display = 'none'
})
document.querySelector('.Add span').addEventListener('click', function () {
    document.querySelector('.Add').style.display = 'none'
})
let arr=[
    {
        id:1001,
        name:'赵云飞',
        phone:19133327105,
        address:'中国',
        isDefault:false
    },
    {
        id:1002,
        name:'张三',
        phone:19133327105,
        address:'美国',
        isDefault:false
    }
]

function render(){
let newarr= arr.map(function(item,index){
    return ` <div class="content" data-id=${index}>
    
    <p>收货人：<span class="a">${item.name}</span></p>
    <p>联系方式：<span class="b">${item.phone}</span></p>
    <p>收货地址：<span class="c">${item.address}</span></p>
    </div>`
    }).join('')
    return document.querySelector('.box-handover .nr').innerHTML = newarr
}
render()

const mydetermine=document.querySelector('.box-address1 .determine')
mydetermine.addEventListener('click',function(){
  const myA=  document.querySelector('.box-address1 .A')
  const myB=  document.querySelector('.box-address1 .B')
  const myC=  document.querySelector('.box-address1 .C')
  const myD=  document.querySelector('.box-address1 .D')
  const myE=  document.querySelector('.box-address1 .E')
  const myF=  document.querySelector('.box-address1 .F')
 if(myA.value.trim()==='' ||myB.value.trim()===''||myC.value.trim()===''||myD.value.trim()===''||myE.value.trim()===''||myF.value.trim()===''){
    alert('内容不能为空')
 }else{let obj={}
 obj.id=arr.id++
 obj.name=document.querySelector('.Add .a').value
 obj.phone=document.querySelector('.Add .a').value
 obj.address=document.querySelector('.Add .a').value
 arr.push(obj)
 render()
 document.querySelector('.Add').style.display='none'
        myA.value=''
        myB.value=''
        myC.value=''
        myD.value=''
        myE.value=''
        myF.value=''
}

})





// 商品信息
let arr1 = [{
    src: 'https://yanxuan-item.nosdn.127.net/9b07be29bfccefb536f787c2d66bc67f.jpg',
    description: '5分钟99%除菌日本卫浴除菌除臭清洁剂380ml',
    specifications: '规格:380ml',
    price: 19.90,
    num: 1,
    subtotal: 19.90,
    totalPrice: 19.90,
}, {
    src: 'https://yanxuan-item.nosdn.127.net/9b07be29bfccefb536f787c2d66bc67f.jpg',
    description: '5分钟99%除菌日本卫浴除菌除臭清洁剂380ml',
    specifications: '规格:380ml',
    price: 19.90,
    num: 10,
    subtotal: 19.90,
    totalPrice: 19.90,
}]
function render1() {
    let newarr1 = arr1.map(item => {
        return `
     <tr class="xx">
    <td class="left">
        <a href="#">
            <img src="${item.src}"
                alt="">
        </a>
        <div class="right">
            <p>${item.description}</p>
            <p class="Specifications">${item.specifications} </p>
        </div>
    </td>
    <td>
        <p>¥${item.price}</p>
    </td>
    <td>
        <p>¥${item.num}</p>
    </td>
    <td>
        <p>¥${item.price * item.num}</p>
    </td>
    <td>
        <p>¥${item.price * item.num}</p>
    </td>
</tr>`
    }).join('')
    return document.querySelector('table .aa').innerHTML = newarr1
}
render1()




// 计算
let num= arr1.reduce(function (r,item){
    return r=r+item.num
 },0)
document.querySelector('.num').innerHTML=`${num}件`
let num1= arr1.reduce(function (r,item){
    return r=r+item.price*item.num
 },0)
document.querySelector('.zongjia').innerHTML=`¥${num1}`
let num2= arr1.reduce(function (r,item){
    return r=(r+item.price*item.num)
 },100)
document.querySelector('.zj').innerHTML=`¥${num2}`



// 点击切换类名
document.querySelector('.box-time').addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        const myactive = document.querySelector('.box-time .active')
        if (myactive) {
            myactive.classList.remove('active')
        }
        e.target.classList.add('active')
    }
})
document.querySelector('.box-way').addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        const myactive = document.querySelector('.box-way .active')
        if (myactive) {
            myactive.classList.remove('active')
        }
        e.target.classList.add('active')
    }
})
document.querySelector('.submit button').addEventListener('click', function () {
    location.href = 'file:///E:/xiao-tu-xian-(8)/payment.html'
})